<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet"
			href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>D111</title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
				font-size: 8px;
				font-weight: 350;
				box-sizing: border-box;
			}

			input:focus {
				outline: none;
			}

			#table {
			
				margin-top: 10px;
				width: 280px;
				margin: 0 auto;
				padding-top: 2px;
				}
			
			#titlelist {
				padding: 0px 2px;
				color: white;
				position: relative;
				display: flex;
				align-items: baseline;
				background: linear-gradient(180deg, lightblue, royalblue);
				justify-content: space-between;
				height: 80px;
			}

			#pig {
				position: absolute;
				background-repeat: no-repeat;
				background-image: url("肥猪1.gif");
				width: 50px;
				height: 50px;
				background-color: white;
				background-size: contain;
				box-shadow: 0px 2px 4px grey;
				border-radius: 100%;
				bottom: -15px;
				left: 50%;
				transform: translate(-50%, 0%);

			}
			#pig:hover{
				background-image: url("肥猪2.gif");
			}
			#ele1{
				font-size: 12px;
			}
			
			#ele2 i {
				padding-left: 6px;
				font-size: 14px;
			}

			#inputlist {
				margin-top: 15px;
				background-color: white;
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				align-items: center;
				width: 180px;
				color: grey;
				margin: 15px auto 0px auto;
			}
			#inputlist>div{
				width:100%;
			}
			#listele1,
			#listele2 {
				border-bottom: 1px solid grey;
				display: flex;
				margin: 2px 0px;
				align-items: center;
				
			}

			#listele3 {
				display: flex;
				justify-content: space-between;
				align-items: start;
				margin: 4px 0px;
			
			}

			#listele1 input,
			#listele2 input {
				width: 100%;
				font-size: 14px;
				margin: 0px 2px;
				border: 0px solid white;
			}

			#listele3>div {
				display: flex;
				align-items: start;
			}

			#listele3 input {
				width: 8px;
				margin-right: 2px;
			}
			#listele4>input {
				background-color: darkcyan;
				color: white;
				font-size: 10px;
				width: 100%;
				padding: 4px 0px;
				border-radius: 4px;
				border: 0px solid white;
			}

			#bottom {
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				color: grey;

			}

			#bottom>i {
				font-size: 20px;

			}
		</style>
	</head>
	<body>
		<div id="table">
			<div id="titlelist">
				<div id="ele1">
					<i class="fa fa-qq" aria-hidden="true" id="ICON1"></i>
					QQ
				</div>
				<div id="ele2">
					<i class="fa fa-cog" aria-hidden="true"></i>
					<i class="fa fa-minus" aria-hidden="true"></i>
					<i class="fa fa-times" aria-hidden="true"></i>
				</div>
				<div id="pig">

				</div>
			</div>
			<div id="inputlist">
				<div id="listele1">
					<i class="fa fa-qq " aria-hidden="true" id="ICON2"></i>
					<input type="text" id="input1">
					<i class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
				</div>
				<div id="listele2">
					<i class="fa fa-lock fa-lg " aria-hidden="true" style="margin-left: 1px;"></i>
					<input type="password" id="input2">
					<i class="fa fa-keyboard-o fa-lg" aria-hidden="true"></i>
				</div>
				<div id="listele3">
					<div><input type="checkbox" id="input3">
						<div>自动登录</div>
					</div>
					<div><input type="checkbox" id="input4">
						<div>记住密码</div>
					</div>
					<div id="input5">找回密码</div>
				</div>

				<div id="listele4">
					<input type="submit" id="input6" value="登录">
				</div>
			</div>

			<div id="bottom">
				<div id="register">注册账号</div>
				<i class="fa fa-qrcode fa-2x" aria-hidden="true" id="qrcode"></i>
			</div>

		</div>
	</body>
	<script>

	</script>
</html>